<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link type="text/css" rel="stylesheet" th:href="@{/css/style.css}"/>
        <!--&lt;!&ndash;[if IE 6]>-->
        <!--<script th:src="@{/js/iepng.js" type="text/javascript"></script>-->
        <!--    <script type="text/javascript">-->
        <!--       EvPNG.fix('div, ul, img, li, input, a'); -->
        <!--    </script>-->
        <!--<![endif]    &ndash;&gt;-->
        <script type="text/javascript" th:src="@{/js/jquery-1.11.1.min_044d0927.js}"></script>
        <script type="text/javascript" th:src="@{/js/jquery.bxslider_e88acd1b.js}"></script>
        <script type="text/javascript" th:src="@{/js/jquery-1.8.2.min.js}"></script>
        <script type="text/javascript" th:src="@{/js/menu.js}"></script>
        <script type="text/javascript" th:src="@{/js/select.js}"></script>
        <script type="text/javascript" th:src="@{/js/lrscroll.js}"></script>
        <script type="text/javascript" th:src="@{/js/iban.js}"></script>
        <script type="text/javascript" th:src="@{/js/fban.js}"></script>
        <script type="text/javascript" th:src="@{/js/f_ban.js}"></script>
        <script type="text/javascript" th:src="@{/js/mban.js}"></script>
        <script type="text/javascript" th:src="@{/js/bban.js}"></script>
        <script type="text/javascript" th:src="@{/js/hban.js}"></script>
        <script type="text/javascript" th:src="@{/js/tban.js}"></script>
        <script type="text/javascript" th:src="@{/js/lrscroll_1.js}"></script>
        <title>尤洪</title>
        <script type="text/javascript" th:inline="javascript">
            //获取协议名称
            var scheme = [[${#request.getScheme()}]];
            //获取服务器名称
            var serverName = [[${#request.getServerName()}]];
            //获取服务器端口号
            var serverPort = [[${#request.getServerPort()}]];
            //获取上下文根
            var contextPath = [[${#request.getContextPath()}]]
            var allPath = scheme + "://" + serverName + ":" + serverPort + contextPath;


            $(function () {

                //在页面加载完毕后,清空表单信息
                $("#userForm")[0].reset();

                //在页面加载完毕后,让用户的文本框自动获得焦点
                $("#username").focus();

                //为用户名输入框进行绑定失去焦点事件(正则验证)
                $("#username").blur(function () {
                    var username = $.trim($("#username").val());
                    if (username === "") {
                        //用户名为空
                        $("#usernameMsg").html("用户名不能为空");
                    } else {
                        // 用户名不为空
                        // 继续判断长度[6-14]
                        if (username.length < 6 || username.length > 14) {
                            // 用户名长度非法
                            $("#usernameMsg").html("用户名长度必须在[6-14]之间");
                        } else {
                            // 用户名长度合法
                            // 继续判断是否含有特殊符号
                            var regExp = /^[A-Za-z0-9]+$/;
                            var ok = regExp.test(username);
                            if (ok) {
                                // 用户名最终合法
                                //发送ajax请求验证用户名是否唯一
                                $.ajax({
                                    url: allPath + "/user/checkUserName.do",
                                    data: {
                                        "username": username
                                    },
                                    type: "get",
                                    dataType: "json",
                                    success: function (data) {
                                        if (data) {
                                            //用户名已经被使用
                                            $("#usernameMsg").html("用户名已被注册!");
                                            return false;
                                        } else {
                                            //用户名未被使用
                                            $("#usernameMsg").html("用户名可以使用").css("color", "#C0C0C0");
                                        }
                                    }
                                })
                            } else {
                                // 用户名中含有特殊字符
                                $("#usernameMsg").html("用户名只能由字母和数字组成");
                                return false;
                            }
                        }
                    }
                })

                //为用户名输入框绑定焦点事件
                $("#username").focus(function () {
                    if ($("#usernameMsg").html() !== "") {
                        $("#username").val("");
                    }
                    $("#usernameMsg").html("");
                })

                //为密码输入框进行绑定失去焦点事件(正则验证)
                $("#password").blur(function () {
                    var password = $.trim($("#password").val());
                    if (password === "") {
                        $("#passwordMsg").html("密码不能为空");
                    } else {
                        // 密码不为空
                        // 继续判断长度[6-20]
                        if (password.length < 6 || password.length > 20) {
                            $("#passwordMsg").html("密码长度必须在[6-20]");
                        } else {
                            //密码包含 数字,英文,字符中的两种以上，长度6-20
                            var regExp = /^(?![\d]+$)(?![a-zA-Z]+$)(?![\da-zA-Z]+$).{6,20}$/;
                            var ok = regExp.test(password);
                            if (ok) {
                                //密码最终合法
                                //alert("密码最终合法");
                                $("#passwordMsg").html("");
                            } else {
                                $("#passwordMsg").html("密码应包含数字或英文或字符中的两种以上");
                                return false;
                            }
                        }
                    }
                })

                //为确认密码输入框绑定焦点事件
                $("#cPassword").focus(function () {
                    if ($("#passwordMsg").html() !== "") {
                        $("#cPassword").val("");
                    }
                    $("#passwordMsg").html("");
                })

                //为确认密码绑定失去焦点事件
                $("#cPassword").blur(function () {
                    //获取密码和确认密码的值
                    var password = $.trim($("#password").val());
                    var cPassword = $.trim($("#cPassword").val());

                    //对两次输入的密码进行判断
                    if (password !== cPassword) {
                        $("#passwordMsg").html("两次输入的密码不一致!");

                        return false;
                    }
                })

                //为邮箱输入框绑定焦点事件(正则验证)
                $("#email").focus(function () {
                    if ($("#emailMsg").html() !== "") {
                        $("#email").val("");
                    }
                    $("#emailMsg").html("");
                })

                //为邮箱输入框绑定
                $("#email").blur(function () {
                    var email = $.trim($("#email").val());
                    var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    var ok = regExp.test(email);
                    if (ok) {
                        // 邮箱最终合法
                        //发送ajax请求验证邮箱是否唯一
                        $.ajax({
                            url: allPath + "/user/checkEmail.do",
                            data: {
                                "email": email
                            },
                            type: "get",
                            dataType: "json",
                            success: function (data) {
                                if (data) {
                                    //用户名已经被使用
                                    $("#emailMsg").html("邮箱已被注册!");
                                    return false;
                                } else {
                                    //用户名未被使用
                                    $("#emailMsg").html("邮箱可以使用").css("color", "#C0C0C0");
                                }
                            }
                        })
                    } else {
                        $("#emailMsg").html("邮箱地址不合法");
                        return false;
                    }
                })

                //为邮箱输入框绑定焦点事件(正则验证)
                $("#phone").focus(function () {
                    if ($("#phoneMsg").html() !== "") {
                        $("#phone").val("");
                    }
                    $("#phoneMsg").html("");
                })

                //对手机号进行正则验证
                $("#phone").blur(function () {
                    var regExp = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
                    var ok = regExp.test($.trim($("#phone").val()));
                    if (!ok) {
                        $("#phoneMsg").html("请输入正确的手机号");
                        return false;
                    }
                })

                //为注册按钮绑定事件
                $("#registerBtn").click(function () {
                    register();
                })

                //为注册按钮绑定回车敲击事件
                $(window).keydown(function (event) {
                    if (event.keyCode === 13) {
                        register();
                    }
                })


            })

            function register() {

                var usernameMsg = $.trim($("#usernameMsg").html());
                var passwordMsg = $.trim($("#passwordMsg").html());
                var emailMsg = $.trim($("#emailMsg").html());
                var phoneMsg = $.trim($("#phoneMsg").html());

                //对验证消息输入框的内容进行判断,若全为空,说明所有信息都合法,可以进行注册,反之不能进行注册
                if (usernameMsg === "用户名可以使用") {
                    if (passwordMsg === "") {
                        if (emailMsg === "邮箱可以使用") {
                            if (phoneMsg === "") {
                                $.ajax({
                                    url: allPath + "/user/register.do",
                                    data: $("#userForm").serializeArray(),
                                    type: "post",
                                    dataType: "json",
                                    success: function (data) {
                                        if (data) {
                                            window.location.href = allPath + "/Login.do";
                                        } else {
                                            alert("注册失败");
                                        }
                                    }
                                })
                            } else {
                                alert("请输入合法的手机号!");
                            }
                        } else {
                            alert("请输入合法的邮箱!");
                        }
                    } else {
                        alert("请输入合法的密码!");
                    }
                } else {
                    alert("请输入合法的用户名!");
                }
            }


        </script>
    </head>
    <body>
        <!--Begin Header Begin-->
        <div class="soubg">
            <div class="sou">
        <span class="fr">
        	<span class="fl">你好，请<a th:href="@{/Login.do}">登录</a>&nbsp; <a th:href="@{/user/register.do}"
                                                                           style="color:#ff4e00;">免费注册</a>&nbsp; </span>
            <span class="fl">|&nbsp;关注我们：</span>
            <span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span>
            <span class="fr">|&nbsp;<a href="#">手机版&nbsp;<img th:src="@{/images/s_tel.png}"/></a></span>
        </span>
            </div>
        </div>
        <!--End Header End-->
        <!--Begin Login Begin-->
        <div class="log_bg">
            <div class="top">
                <div class="logo"><a th:href="@{/Index.do}"><img th:src="@{/images/logo.png}"/></a></div>
            </div>
            <div class="regist">
                <div class="log_img"><img th:src="@{/images/l_img.png}" width="611" height="425"/></div>
                <div class="reg_c">
                    <form id="userForm">
                        <table border="0" style="width:420px; font-size:14px; margin-top:20px;" cellspacing="0"
                               cellpadding="0">
                            <tr height="50" valign="top">
                                <td width="95">&nbsp;</td>
                                `
                                <td>
                                    <span class="fl" style="font-size:24px;">注册</span>
                                    <span class="fr">已有商城账号，<a th:href="@{/Login.do}"
                                                               style="color:#ff4e00;">我要登录</a></span>
                                </td>
                            </tr>
                            <tr height="50">
                                <td align="right"><font color="#ff4e00">*</font>&nbsp;用户名 &nbsp;</td>
                                <td><label>
                                    <input type="text" value="" class="l_user" id="username" name="username"
                                           placeholder="限16个字符,支持中英文,数字,减号或下划线"/>
                                </label></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><span id="usernameMsg" style="color: red"></span></td>
                            </tr>
                            <tr height="50">
                                <td align="right"><font color="#ff4e00">*</font>&nbsp;密码 &nbsp;</td>
                                <td><label for="password"></label><input type="password" value="" class="l_pwd"
                                                                         name="password" id="password"
                                                                         placeholder="长度6-20,需数字,英文,字符中的两种以上"/></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                            <tr height="50">
                                <td align="right"><font color="#ff4e00">*</font>&nbsp;确认密码 &nbsp;</td>
                                <td><label>
                                    <input type="password" value="" class="l_pwd" name="cPassword" id="cPassword"/>
                                </label></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><span id="passwordMsg" style="color: red"></span></td>
                            </tr>
                            <tr height="50">
                                <td align="right"><font color="#ff4e00">*</font>&nbsp;邮箱 &nbsp;</td>
                                <td><label>
                                    <input type="text" value="" class="l_email" name="email" id="email"/>
                                </label></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><span id="emailMsg" style="color: red"></span></td>
                            </tr>
                            <tr height="50">
                                <td align="right"><font color="#ff4e00">*</font>&nbsp;手机 &nbsp;</td>
                                <td><label>
                                    <input type="text" value="" class="l_tel" name="phone" id="phone"/>
                                </label></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td><span id="phoneMsg" style="color: red"></span></td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                                <td style="font-size:12px; padding-top:20px;">
                	                <span style="font-family:'宋体';" class="fl">
                    	                <label class="r_rad"><input type="checkbox" checked/></label><label
                                            class="r_txt">我已阅读并接受《用户协议》</label>
                                    </span>
                                </td>
                            </tr>
                            <tr height="60">
                                <td>&nbsp;</td>
                                <td><input type="button" id="registerBtn" value="立即注册" class="log_btn"/></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <!--End Login End-->
        <!--Begin Footer Begin-->
        <div class="btmbg">
            <div class="btm">
                备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright © 2015-2018 尤洪商城网 All Rights Reserved. 复制必究 ,
                Technical Support: Dgg Group <br/>
                <img th:src="@{/images/b_1.gif}" width="98" height="33"/><img th:src="@{/images/b_2.gif}" width="98"
                                                                              height="33"/><img
                    th:src="@{/images/b_3.gif}" width="98" height="33"/><img th:src="@{/images/b_4.gif}" width="98"
                                                                             height="33"/><img
                    th:src="@{/images/b_5.gif}" width="98" height="33"/><img th:src="@{/images/b_6.gif}" width="98"
                                                                             height="33"/>
            </div>
        </div>
        <!--End Footer End -->

    </body>


    <!--&lt;!&ndash;[if IE 6]>-->
    <!--<script th:src="@{///letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>-->
    <!--<![endif]&ndash;&gt;-->
</html>
